import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
const myRole = "fudao";
//全局注册自定义指令(当创建指令得时候,直接书写一个回调函数,这个函数默认是钩子函数中的bind)
    // Vue.directive("role",(el,binding)=>{
        //把不符合条件的按钮删除
        // if (!binding.value.includes(myRole)) {
        //   // el.remove();
        //   // el.parentNode.removeChild(el);
        //   console.log(el, el.parentNode);
        // }
    // })
      /* 
  定义指令的时候,第二个参数可以书写一个对象,这个对象内可以书写多个钩子函数,供不同的逻辑使用
*/

    Vue.directive("role",{
      /* bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 */
      bind(){
        console.log("bind");
      },
      /* 
    inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  */
      inserted(el,binding){
        if (!binding.value.includes(myRole)) {
          el.remove();
          // el.parentNode.removeChild(el);
          // console.log(el, el.parentNode);
      }
    },
      /* 
    update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
  */
    update(){
      console.log("update");
    },/* 
    componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
  */
  componentUpdated() {
    console.log("componentUpdated");
  },
  /* 
    unbind：只调用一次，指令与元素解绑时调用
  */
  unbind() {
    console.log("unbind");
  },
    })
new Vue({
  render: h => h(App),
}).$mount('#app')
